<script setup lang="ts">
import { ref } from "vue";
import { useExample } from "./hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";

// defineOptions({
//   name: "Answerquery"
// });

const {
  form,
  rules,
  refform,
  loading,
  classList,
  datalist,
  planList,
  classId,
  userList,
  submoduList,
  sumup,
  HandClassId,
  onSearch,
  resetForm
} = useExample();
</script>

<template>
  <div class="main">
    <el-form :inline="true" :model="form" ref="refform" class="bg-bg_color w-[99/100] pl-4 pt-4" :rules="rules">
      <el-form-item label="计划名称：" prop="planId">
        <el-select v-model="form.planId" placeholder="请选择计划名称" clearable filterable class="!w-[180px]">
          <el-option v-for="item in planList" :key="item.planId" :label="item.planName" :value="item.planId" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级名称：" prop="classId">
        <el-select v-model="form.classId" placeholder="请选择班级名称" clearable filterable class="!w-[180px]"
          @change="HandClassId">
          <el-option v-for="item in classList" :key="item.key" :label="item.value" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作用户：" prop="userId">
        <el-select v-model="form.userId" placeholder="请选择操作用户" clearable filterable class="!w-[180px]">
          <el-option v-for="item in userList" :key="item.key" :label="item.value" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="模块名称：" prop="submodulId">
        <el-select v-model="form.submodulId" placeholder="请选择模块" clearable filterable class="!w-[180px]">
          <el-option v-for="item in submoduList" :key="item.selectName" :label="item.selectName"
            :value="item.selectName" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="onSearch(refform)">
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(refform)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-card style="margin-top: 20px;height:calc(100% - 100px) ;" shadow="never">
      <el-empty class="empty_sumup" v-show="!sumup" description="答案查询" />
      <div class="sumup" v-show="sumup"><span v-html="sumup" /></div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.text_span {
  width: 100%;
  padding: 10px 0;
  text-align: center;
}

.tab_headr {
  width: 100%;
  background-color: #cae1ff;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  font-size: 16px;
}

.tab {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  margin-bottom: 10px;
}

table tr th {
  padding: 5px 12px;
  border: 1px solid #cae1ff;
}

:deep(.el-card__body) {
  height: 100%;
  padding: 0 15px;
  overflow-y: scroll;
}

.empty_sumup {
  height: 100%;
}

.sumup {
  margin-top: 20px;
}
</style>
